<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" indent="yes"/>

<xsl:template match="docbox">
    <ul id="sheetsbar"></ul>
    
    <xsl:for-each select="sheetbox">
        <xsl:variable name="i" select="position()" />
        <xsl:if test="$i=$sheet">
            <script type="text/javascript">setCurrentSheetbox('<xsl:value-of select="@id" />')</script>
        </xsl:if>
    </xsl:for-each>
    
    <xsl:for-each select="/docbox[sheetbox]">
        <xsl:if test="@viewmode='debug'">
            <xsl:apply-templates select="sheetbox" mode="debug" />
        </xsl:if>
        <xsl:if test="@viewmode='complex'">
            <xsl:apply-templates select="sheetbox" mode="complex" />
        </xsl:if>    
    </xsl:for-each>
    <div id="statusbar">docbox title: <xsl:value-of select="title"/></div>
    
    <xsl:apply-templates select="timeline" />
</xsl:template>

<xsl:template match="sheetbox" mode="debug">
    <div class="sheetbox"><xsl:value-of select="title"/></div>
    <ul>
    <xsl:for-each select="unitbox">
        <li class="unitbox">
          <xsl:value-of select="@id"/> : 
          <xsl:value-of select="."/>
          [<xsl:value-of select="@type"/>]
        </li>
    </xsl:for-each>
    </ul>
</xsl:template>

<xsl:template match="sheetbox" mode="complex">
    <li class="sheetboxtitle">
    <xsl:attribute name="id"><xsl:value-of match="title" select="@id" /></xsl:attribute>
    <xsl:attribute name="onclick">setCurrentSheetbox('<xsl:value-of match="title" select="@id" />')</xsl:attribute>
    <xsl:value-of select="title"/>
    <a class="link-menu-context">
    <xsl:attribute name="id"><xsl:value-of select="@id" />_menu</xsl:attribute>
    <xsl:attribute name="title">sheet '<xsl:value-of select="title" />' menu</xsl:attribute>
    <xsl:attribute name="onclick">showMenu(event, 'sheetbox', '<xsl:value-of select="@id" />')</xsl:attribute>
    <img src="gui/img/menu_se.png" width="10" height="10" /></a>
    </li>
    
    <div class="sheetbox">
    <xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
    <xsl:attribute name="onmousedown">setCurrentUnitbox(event, undefined, undefined)</xsl:attribute>

    <xsl:apply-templates select="unitbox" />
    <xsl:apply-templates select="g" />

    </div>

</xsl:template>

<xsl:template match="g">
    <xsl:apply-templates select="unitbox" />

    <script type="text/javascript">
    <xsl:value-of select="@id" /> = new g({id:'<xsl:value-of select="@id" />'});
    <xsl:for-each select="unitbox">
        <xsl:value-of select="parent::g/@id" />.add('<xsl:value-of select="@id" />');
        getUnitboxFromId('<xsl:value-of select="@id" />').addtogroup('<xsl:value-of select="parent::g/@id" />');
    </xsl:for-each>
    unitboxgroups['<xsl:value-of select="@id" />'] = <xsl:value-of select="@id" />;
    </script>

</xsl:template>

<xsl:template match="unitbox">
    <div>
    <xsl:attribute name="id"><xsl:value-of select="@id" /></xsl:attribute>
    <xsl:if test="@title">
        <xsl:attribute name="title"><xsl:value-of select="@title" /></xsl:attribute>
    </xsl:if>
    <xsl:attribute name="onmousedown">setCurrentUnitbox(event, '<xsl:value-of select="@id" />', '<xsl:value-of select="@type"/>s')</xsl:attribute>
    <xsl:attribute name="onmouseup">currentUnitbox.updateCoords()</xsl:attribute>
    <xsl:attribute name="class"><xsl:value-of select="@class"/></xsl:attribute>
    <xsl:choose>
        <xsl:when test="@type='number'">
            <xsl:value-of select="."/>
            <script type="text/javascript">
            var <xsl:value-of select="@id"/> = <xsl:value-of select="."/>;
            unitboxes.numbers['<xsl:value-of select="@id"/>'] = new unitboxnumber({
                id: '<xsl:value-of select="@id" />',
                class: '<xsl:value-of select="@class" />',
                type: '<xsl:value-of select="@type" />',
                x: '<xsl:value-of select="@x" />',
                y: '<xsl:value-of select="@y" />',
                width: '<xsl:value-of select="@width" />',
                height: '<xsl:value-of select="@height" />',
                value: <xsl:value-of select="."/>
            });
            </script>
        </xsl:when>
        <xsl:when test="@type='expression'">
            <script type="text/javascript">
            unitboxes.expressions['<xsl:value-of select="@id"/>'] = new unitboxexpression({
                id: '<xsl:value-of select="@id" />',
                class: '<xsl:value-of select="@class" />',
                type: '<xsl:value-of select="@type" />',
                x: '<xsl:value-of select="@x" />',
                y: '<xsl:value-of select="@y" />',
                width: '<xsl:value-of select="@width" />',
                height: '<xsl:value-of select="@height" />',
                callback: function() { return (<xsl:value-of select="."/>); },
                value: String('<xsl:value-of select="."/>')
            });
            var <xsl:value-of select="@id"/> = 0;
            unitboxes.expressions['<xsl:value-of select="@id"/>'].domobj.setHTML(<xsl:value-of select="@id"/>);
            window.addEvent('domready', function() {
                var <xsl:value-of select="@id"/> = unitboxes.expressions['<xsl:value-of select="@id"/>'].callback();
                unitboxes.expressions['<xsl:value-of select="@id"/>'].domobj.setHTML(<xsl:value-of select="@id"/>);
            });
            </script>
        </xsl:when>
        <xsl:when test="@type='range'">
            <script type="text/javascript">
            var <xsl:value-of select="@id"/> = parseFloat(<xsl:value-of select="@from"/>);
            <xsl:if test="@synchro">
            synchros['<xsl:value-of select="@id"/>'] = <xsl:value-of select="@synchro"/>;
            </xsl:if>
            unitboxes.ranges['<xsl:value-of select="@id"/>'] = new unitboxrange({
                id: '<xsl:value-of select="@id" />',
                class: '<xsl:value-of select="@class" />',
                type: '<xsl:value-of select="@type" />',
                x: '<xsl:value-of select="@x" />',
                y: '<xsl:value-of select="@y" />',
                width: '<xsl:value-of select="@width" />',
                height: '<xsl:value-of select="@height" />',
                from: <xsl:value-of select="@from"/>,
                to: <xsl:value-of select="@to"/>,
                step: <xsl:value-of select="@step" />
            });
            </script>
        </xsl:when>
        <xsl:when test="@type='graph'">
            <canvas>
            <xsl:attribute name="width"><xsl:value-of select="@width" /></xsl:attribute>
            <xsl:attribute name="height"><xsl:value-of select="@height" /></xsl:attribute>
            Your browser has not support for canvas object</canvas>
            <script type="text/javascript">
            unitboxes.graphs['<xsl:value-of select="@id"/>'] = new unitboxgraph({
                id: '<xsl:value-of select="@id" />',
                class: '<xsl:value-of select="@class" />',
                type: '<xsl:value-of select="@type" />',
                x: '<xsl:value-of select="@x" />',
                y: '<xsl:value-of select="@y" />',
                width: '<xsl:value-of select="@width" />',
                height: '<xsl:value-of select="@height" />',
            });
            <xsl:for-each select="use">
            unitboxes.graphs['<xsl:value-of select="parent::unitbox/@id"/>'].monitor('<xsl:value-of namespace="http://www.w3.org/1999/xlink" select="@href"/>');
            </xsl:for-each>
            </script>
        </xsl:when>
        <xsl:otherwise>
            <xsl:value-of select="."/>
            <script type="text/javascript">
            var <xsl:value-of select="@id"/> = String("<xsl:value-of select="."/>");
            unitboxes.strings['<xsl:value-of select="@id"/>'] = new unitboxstring({
                id: '<xsl:value-of select="@id" />',
                class: '<xsl:value-of select="@class" />',
                type: '<xsl:value-of select="@type" />',
                x: '<xsl:value-of select="@x" />',
                y: '<xsl:value-of select="@y" />',
                width: '<xsl:value-of select="@width" />',
                height: '<xsl:value-of select="@height" />',
                value: String('<xsl:value-of select="."/>')
            });
            </script>
        </xsl:otherwise>
    </xsl:choose>

    <xsl:if test="@title!=''">
    <div class="unitbox-title"><xsl:value-of select="@title" /></div>
    </xsl:if>

    <a class="sizer" title="resize unitbox">
    <xsl:attribute name="id"><xsl:value-of select="@id" />_sizer</xsl:attribute>
    <xsl:attribute name="onmousedown">setCurrentUnitbox(event, '<xsl:value-of select="@id" />', '<xsl:value-of select="@type"/>s')</xsl:attribute>
    <xsl:attribute name="onmouseup">currentUnitbox.updateCoords()</xsl:attribute>
    <img src="gui/img/resize_se.png" width="10" height="10" /></a>
    </div>
</xsl:template>

<xsl:template match="timeline">
    <div id="timeline">
        <div id="timelinecontrols">
            <div style="float:left">
                <h1>TIMELINE</h1>
                <p id="timelineinfo">from <xsl:value-of select="@from" /> to <xsl:value-of select="@to" /> - step <xsl:value-of select="@step" /> seconds</p>
            </div>
            <div style="float:left">CURRENT <input type="text" readonly="readonly" size="3" id="timelinewatcher" /></div>
            <div style="clear:left"></div>
            <input type="button" value="start" onclick="currentTimeline.run()" />
            <input type="button" value="pause" onclick="currentTimeline.pause()" />
            <input type="button" value="stop" onclick="currentTimeline.stop()" />
            <input type="button" value="&lt;&lt;" onclick="currentTimeline.movetobegin()" />
            <input type="button" value="&lt;" onclick="currentTimeline.onestepbackward()" />
            <input type="button" value="&gt;" onclick="currentTimeline.onestepforward()" />
            <input type="button" value="&gt;&gt;" onclick="currentTimeline.movetoend()" />
        </div>
        <div id="timelineevents"><strong>EVENTS ON TIMELINE</strong>
            <table id="timelineeventstable" border="1">
            <thead id="timelineeventstablehead">
                <tr>
                    <th>AT STEP</th>
                    <th>TARGET</th>
                    <th>CODE</th>
                    <th>REPEAT EVERY</th>
                </tr>
            </thead>
            <tbody id="timelineeventstablebody"></tbody>
            </table>
        </div>
        <div style="clear:left"></div>
        <script type="text/javascript">
        currentTimeline = new timeline({});
        currentTimeline.from = <xsl:value-of select="@from" />;
        currentTimeline.to = <xsl:value-of select="@to" />;
        currentTimeline.step = <xsl:value-of select="@step" />;
        currentTimeline.currentstep = <xsl:value-of select="@from" />;
        <xsl:for-each select="event">
        <xsl:sort select="@at" />
        currentTimeline.addevent("<xsl:value-of select="."/>", "<xsl:value-of select="@at" />", "<xsl:value-of select="@repeatevery" />", "<xsl:value-of select="@target" />");
        </xsl:for-each>
        </script>
    </div>
</xsl:template>

</xsl:stylesheet>